<template>
    <div>
      <div class="blueDiv">剩余时间：{{ timeNum }}</div>
       
    </div>
    
  </template>
   
  <script>

  export default {
    props: {
      endTime: {
        type: Date,
        required: true
      },
      type:{
        type:String,
        default:''
      }
    },
    components: {  },
    data() {
      return {
        intervalId: null,
        timeNum:'',
        starTime:''
      };
    },
    computed: {
      
    },
    methods: {
        remainingTime() {
          console.log("999//")
        const end = this.endTime;
        const now = new Date();
        const distance = end - now;
        if (distance < 0) {
          let now1=new Date();
          this.starTime= now1.setSeconds(now1.getSeconds() + distance);
          return '00:00:00';
        }
        const days=this.pad(Math.floor((distance / (1000 * 60 * 60*24))));
        const hours = this.pad(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
        const minutes = this.pad(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
        const seconds = this.pad(Math.floor((distance % (1000 * 60)) / 1000));
   
        if(days>0){
        return `${days} ${hours}:${minutes}:${seconds}`;
       }else if(hours>0){
        return `${hours}:${minutes}:${seconds}`;
       }else if(minutes>0){
        return `${minutes}:${seconds}`;
       }else{
        return `${minutes}:${seconds}`;
       }
      },
      pad(num) {
        return ('00' + num).slice(-2);
      },
      startCountdown() {
        this.intervalId = setInterval(() => {
          this.timeNum=this.remainingTime()
        }, 1000);
      },
      stopCountdown() {
        if (this.intervalId) {
          clearInterval(this.intervalId);
        }
      }
    },
    mounted() {
      this.startCountdown();
    },
    beforeDestroy() {
      this.stopCountdown();
    }
  };
  </script>
  <style lang="scss" scoped>
   .blueDiv{
    display: block;
    text-align: center;
   
   }
   
  
</style>